<template>
  <div>
    <el-dialog
      title="修改档案"
      width="35%"
      :before-close="handleClose"
      :visible="dialogVisible"
      top="3vh"
    >
      <el-form ref="form" :model="form" label-width="80px" :rules="rules">
        <el-form-item label="用户名" prop="userName">
          <el-input
            v-model="form.userName"
            prefix-icon="el-icon-user"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item label="账号" prop="account">
          <el-input
            v-model="form.account"
            prefix-icon="el-icon-notebook-2"
            placeholder="请输入登陆账号"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="passWord">
          <el-input
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
            v-model="form.passWord"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassWord">
          <el-input
            placeholder="请输入新密码"
            prefix-icon="el-icon-lock"
            v-model="form.newPassWord"
          ></el-input>
        </el-form-item>
        <el-form-item label="签名">
          <el-input
            prefix-icon="el-icon-edit-outline"
            v-model="form.signature"
            placeholder="请输入个性签名"
          ></el-input>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-col :span="11">
            <el-date-picker
              v-model="date"
              type="date"
              placeholder="选择日期"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="头像">
          <el-upload
            class="avatar-uploader"
            action="/image/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :http-request="handleHttpRequest"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="clickcanel">取 消</el-button>
        <el-button type="primary" @click="clickdetermine">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { ImageUpload } from "../../api/index"
import { FindFile } from "../../api/index"
export default {
  data() {
    return {
      dialogVisible: true,
      imageUrl: "",
      _id: "",
      form: {
        userName: "",
        account: "",
        passWord: "",
        newPassWord: "",
        signature: "",
      },
      date: "",
      rules: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        account: [
          { required: true, message: "请输登陆账号", trigger: "blur" },
          { min: 3, message: "长度至少3个字符", trigger: "blur" },
        ],
        passWord: [
          { required: true, message: "请输登陆账号", trigger: "blur" },
          { min: 5, message: "长度至少 5 个字符", trigger: "blur" },
        ],
      },
    }
  },
  created() {
    FindFile().then((res) => {
      this.form.userName = res.userName
      this.form.account = res.account
      this.form.passWord = res.passWord
      this.form.signature = res.signature || "这个家伙很懒，没有写签名"
      this._id = res._id
      this.date = res.date || ""
      this.imageUrl = res.photo || ""
    })
  },
  methods: {
    // upload组件的事件
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    // upload组件的事件
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg"
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error("上传头像图片格式错误(jpeg,png,img)!")
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!")
      }
      return isJPG && isLt2M
    },
    // 覆盖upload组件的action,自定义上传的方法
    handleHttpRequest(a) {
      var formdata = new FormData()
      formdata.append("file", a.file)
      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      }
      ImageUpload(formdata, config).then((res) => {
        if (res.imgurl) {
          this.imageUrl = res.imgurl
        }
      })
    },

    // 点击×号触发的事件
    handleClose(done) {
      this.$emit("close")
    },
    // 点击取消按钮触发的事件
    clickcanel() {
      this.$emit("close")
    },
    // 点击取消按钮触发的事件
    clickdetermine() {
      if (this.form.newPassWord) {
        if (this.form.newPassWord.length > 5) {
          this.form.passWord = this.form.newPassWord
          this.$emit("handleFile", {
            userName: this.form.userName,
            account: this.form.account,
            passWord: this.form.passWord,
            signature: this.form.signature,
            date: this.date,
            photo: this.imageUrl,
            _id: this._id,
          })
        } else {
          this.$message.error("新密码长度不足5")
        }
      } else {
        this.$emit("handleFile", {
          userName: this.form.userName,
          account: this.form.account,
          passWord: this.form.passWord,
          signature: this.form.signature,
          date: this.date,
          photo: this.imageUrl,
          _id: this._id,
        })
      }
    },
  },
}
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
.el-form {
  margin: 0px 20px;
}
</style>
